// 之前从react解构的东西还是从react解构
// 其他的东西统一从umi里面引
import { Outlet, Link, useNavigate, useClientLoaderData } from "umi";
import { useEffect } from "react";

// 引入css的时候取个名字
// css modules
import styles from "./index.less";

const getData = (url: string) => {
  return fetch(url)
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

export async function clientLoader() {
  const res = await Promise.all([
    getData(
      "/api/mmdb/movie/v3/list/hot.json?ct=%E6%9D%AD%E5%B7%9E&ci=50&channelId=4"
    ),
    getData("http://localhost:8888/api/rated/list"),
  ]);
  return res;
}

export default function HomePage() {
  const navigate = useNavigate();
  const res = useClientLoaderData();

  const goDetail = () => {
    navigate("/detail/33333");
  };

  // useEffect(() => {
  //   fetch("http://localhost:8888/api/rated/list")
  //     .then((response) => response.json())
  //     .then((res) => {
  //       console.log(res);
  //     });
  // }, []);

  useEffect(() => {
    console.log(res);
  }, []);

  return (
    <div>
      <h2 className={styles.title}>Yay! Welcome to umi!</h2>
      <p>
        To get started, edit <code>pages/index.tsx</code> and save to reload.
      </p>
      <Link to="/detail/22222">跳转到详情页</Link>
      <button onClick={goDetail}>跳转到详情页</button>
      <Outlet />
    </div>
  );
}
